@namespace FluentCMS.Web.UI

@if (Model != null)
{
    <EditForm Model="@Model" Name="PageSettings" OnSubmit="HandleSubmit">
        <DataAnnotationsValidator />
        <Modal Visible="@Open" Placement="ModalPlacement.Top" Size="ModalSize.Large" OnClose="HandleCancel">
            <ModalHeader>
                <ModalTitle>@Title</ModalTitle>
            </ModalHeader>
            <ModalBody>
                <Tabs Active="General">
                    <TabList>
                        <TabItem Name="General">General</TabItem>
                        <TabItem Name="MetaTags">Meta tags</TabItem>
                        <TabItem Name="Permissions">Permissions</TabItem>
                    </TabList>
                    <TabContent>
                        <TabPanel Name="General">
                            <Grid GutterX="GridGutter.Large">
                                <FormInput @bind-Value="Model!.Title" Cols="6" Label="Title" Placeholder="Enter Title" Required />
                                <FormInput Hint="Url slug of the page, should not be nested." @bind-Value="Model!.Path" Cols="6" Label="Path" Placeholder="Enter url path" />
                                <FormSelect @bind-Value="Model!.ParentId" Cols="6" Data="PageOptions" TextField="Title" ValueField="Value" Label="Parent Page" />
                                <FormSelect @bind-Value="Model!.LayoutId" Cols="6" Data="LayoutOptions" ValueField="Value" TextField="Title" Label="Layout" Placeholder="Choose Layout" />
                                <FormSelect @bind-Value="Model!.EditLayoutId" Cols="6" Data="LayoutOptions" ValueField="Value" TextField="Title" Label="Edit Layout" Placeholder="Choose Edit Layout" />
                                <FormSelect @bind-Value="Model!.DetailLayoutId" Cols="6" Data="LayoutOptions" ValueField="Value" TextField="Title" Label="Detail Layout" Placeholder="Choose Detail Layout" />
                                <FormNumberInput @bind-Value="Model!.Order" Cols="6" Label="Order" Placeholder="Enter page order" />
                            </Grid>
                        </TabPanel>
                        <TabPanel Name="MetaTags">
                            <Grid GutterX="GridGutter.Large">
                                <FormTextarea @bind-Value="Model!.Head" Label="Head" Placeholder="Enter Head content" />
                                <FormInput @bind-Value="Model!.MetaTitle" Cols="12" Label="Meta Title" Placeholder="Enter Meta Title" />
                                <FormTextarea @bind-Value="Model.MetaDescription" Label="Meta Description" Placeholder="Enter Meta Description" />
                                <FormSelect Data="OgTypeOptions" @bind-Value="Model!.OgType" TextField="Title" ValueField="Value" Label="Og Type" Placeholder="Choose page type" />
                                <FormCheckbox Text="Add this page to sitemap" Label="Index" @bind-Value="@Model.Index" Cols="6"/>
                                <FormCheckbox Text="Search engines will follow links of this page" Label="Follow" @bind-Value="@Model.Follow" Cols="6"/>
                            </Grid>
                        </TabPanel>
                        <TabPanel Name="Permissions">
                            <Grid GutterX="GridGutter.Large">
                                <FormCheckboxGroup Hint="Roles which can view the page." @bind-Value="Model!.ViewRoleIds" Data="ViewState.Site.AllRoles" Label="ViewRoles" TextField="Name" ValueField="Id" />
                                <FormCheckboxGroup Hint="Roles which are able to manage page." @bind-Value="Model!.AdminRoleIds" Data="AdminRoleOptions" Label="AdminRoles" TextField="Name" ValueField="Id" />
                            </Grid>
                        </TabPanel>
                        <Spacer />
                        <Alert Visible="Errors.Count > 0" Type="AlertType.Danger">
                            @foreach (var error in Errors)
                            {
                                <p>@error</p>
                            }
                        </Alert>
                    </TabContent>
                </Tabs>
            </ModalBody>
            <ModalFooter>
                <Stack>
                    <Button @onclick="HandleCancel">Cancel</Button>
                    <Button Type="ButtonType.Submit" Color="Color.Primary">Submit</Button>
                </Stack>
            </ModalFooter>
        </Modal>
    </EditForm>
}
